<template>
  <div class="container">
    <div class="rollup-details" v-if="!$util.isEmpty(rollupDetail)">
      <div class="content">
        <div class="title">
          <span v-if="rollupDetail.has_bought == 1">已购买</span>{{ rollupDetail.title }}
        </div>
        <div class="sum">
          <span>{{ `试卷数：${rollupDetail.paper_count}` }}</span>
          <span>{{ `练习人数：${rollupDetail.practice_count}` }}</span>
        </div>
        <div class="intro">{{ rollupDetail.intro }}</div>
      </div>
      <div class="operate">
        <template v-if="rollupDetail.has_bought == 0">
          <div class="price" v-if="rollupDetail.user_price > 0">
            {{ rollupDetail.user_price | formatMoney }}
          </div>
          <div class="free" v-else>免费</div>
        </template>
        <div class="price" v-else>已购买</div>
        <el-button
          v-if="rollupDetail.user_price > 0 && rollupDetail.has_bought == 0"
          type="primary"
          size="medium"
          round
          @click="clickAnswer(1, rollupDetail.id)"
          >购买</el-button
        >
        <el-button
          v-else
          type="primary"
          size="medium"
          round
          @click="clickAnswer(2, rollupDetail.id, $route.query.paper_id)"
          >开始答题</el-button
        >
      </div>
    </div>
    <div class="rollup-paper" v-if="!$util.isEmpty(rollupDetail)">
      <div class="item" v-for="item in rollupDetail.rollup_paper" :key="item.paper_id">
        <div class="content">
          <div class="title">{{ item.title }}</div>
          <!--  <div class="progress">
            <el-progress :percentage="50" stroke-width="8" :show-text="false"></el-progress>
            <span class="num">{{ `4/10` }}</span>
          </div> -->
          <div class="num">{{ `${item.practice_count}人练习` }}</div>
        </div>
        <div class="operate">
          <div
            class="btn info"
            v-if="rollupDetail.has_bought == 0 && rollupDetail.user_price > 0"
            @click="clickAnswer(3)"
          >
            开始答题
          </div>
          <div class="btn plain" v-else @click="clickAnswer(2, rollupDetail.id, item.paper_id)">
            开始答题
          </div>
        </div>
      </div>
      <EduNoData v-if="$util.isEmpty(rollupDetail.rollup_paper)"></EduNoData>
    </div>
  </div>
</template>

<script>
import EduNoData from '@/components/EduNoData'
export default {
  components: {
    EduNoData
  },
  data() {
    return {
      rollupDetail: {}
    }
  },
  created() {
    this.getRollupDetail()
  },
  methods: {
    // 获取数据
    getRollupDetail() {
      this.$api.getExamRollupDetail(
        {
          rollup_id: this.$route.query.rollup_id
        },
        res => {
          this.rollupDetail = res.data
        }
      )
    },
    // 按钮
    clickAnswer(index, rollup_id, paper_id) {
      const _this = this
      let calc = {
        // 购买
        1: function() {
          _this.$router.push({
            path: '/buy/exam',
            query: {
              id: rollup_id,
              type: 'rollup'
            }
          })
        },
        // 答题按钮
        2: function() {
          _this.$router.push({
            path: '/exam/rollup/topic',
            query: {
              rollup_id: rollup_id,
              paper_id: paper_id
            }
          })
        },
        // 未购买答题按钮
        3: function() {
          _this.$message.info(`请先购买`)
        },
        run: function(fn) {
          return fn && fn()
        }
      }
      calc.run(calc[index])
    }
  }
}
</script>

<style lang="scss" scoped>
.rollup-details {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 30px;
  background-color: #ffffff;
  .content {
    width: 800px;
    .title {
      font-size: 16px;
      font-weight: 500;
      color: $text-color-import;
      span {
        float: left;
        margin-right: 6px;
        padding: 1px 3px;
        font-size: 12px;
        font-weight: 400;
        color: #ff8a52;
        border-radius: 2px;
        border: 1px solid #ff8a52;
      }
    }
    .sum {
      margin-top: 12px;
      span {
        font-size: 13px;
        font-weight: 400;
        color: $text-color-auxiliary;
        margin-right: 30px;
      }
    }
    .intro {
      margin-top: 8px;
      font-size: 13px;
      font-weight: 400;
      color: #909399;
      line-height: 20px;
    }
  }
  .operate {
    display: flex;
    align-items: center;
    .price,
    .free {
      font-size: 14px;
      font-weight: 500;
      margin-right: 42px;
    }
    .price {
      color: $text-color-price;
    }
    .free {
      color: $text-color-free;
    }
    .el-button {
      width: 94px;
    }
  }
}
.rollup-paper {
  margin-top: 14px;
  background-color: #ffffff;
  padding-left: 30px;
  .item {
    padding: 20px 30px 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f8f9fa;
    .content {
      width: 700px;
      .title {
        font-size: 15px;
        font-weight: 400;
        color: $text-color-import;
      }
      .num {
        margin-top: 10px;
        font-size: 13px;
        font-weight: 400;
        color: $text-color-auxiliary;
      }
      .progress {
        margin-top: 12px;
        display: flex;
        align-items: center;
        .el-progress {
          width: 600px;
        }
        .num {
          margin-left: 12px;
          font-size: 13px;
          font-weight: 400;
          color: $text-color-auxiliary;
        }
      }
    }
    .operate {
      display: flex;
      align-items: center;
      .price,
      .free {
        font-size: 14px;
        font-weight: 500;
        margin-right: 42px;
      }
      .price {
        color: $text-color-price;
      }
      .free {
        color: $text-color-free;
      }
      .el-button {
        width: 94px;
      }
      .btn {
        width: 94px;
        height: 32px;
        line-height: 30px;
        text-align: center;
        border-radius: 19px;
        border-width: 1px;
        border-style: solid;
        font-size: 14px;
        font-weight: 400;
        cursor: pointer;
        box-sizing: border-box;
      }
      .primary {
        color: #ffffff;
        @include edu-color-primary(background-color);
        @include edu-color-primary(border-color);
      }
      .plain {
        @include edu-color-auxiliary;
        @include edu-color-primary(border-color);
        &:hover {
          color: #ffffff;
          @include edu-color-primary(background-color);
        }
      }
      .info {
        color: $text-color-auxiliary;
        border-color: $text-color-auxiliary;
      }
    }
  }
}
</style>
